import React, { Component } from 'react';
import { Input, Form, Select } from "antd"
const { Option } = Select;

class OldAddUser extends Component {

    // 通过用户的所属角色的_id值查找对用的roleName
    getGetuserName = (userGrade) => {
        const role = this.props.roleList.find(item => {
            return item._id === userGrade;
        })
        return role._id;
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const { userName, passWord, phone, userGrade } = this.props.user;
    
        const formItemLayout = {
            labelCol: {
                sm: { span: 6 },

            },
            wrapperCol: {
                sm: { span: 16 },

            },
        };
        return (
            <div>
                <Form {...formItemLayout}>
                    <Form.Item label="用户名称">
                        {getFieldDecorator('userName', {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入用户名称！',
                                },
                            ],
                            initialValue: userName ? userName : "",
                        })(<Input />)}
                    </Form.Item>
                    <Form.Item label="用户密码">
                        {getFieldDecorator('passWord', {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入用户密码！',
                                },
                                { min: 5, message: "最小长度为5" },
                                { max: 12, message: "最大长度为12" },
                            ],
                            initialValue: passWord ? passWord : "",
                        })(<Input />)}
                    </Form.Item>
                    <Form.Item label="手机号码">
                        {getFieldDecorator('phone', {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入手机号码！',
                                },
                            ],
                            initialValue: phone ? phone : "",
                        })(<Input />)}
                    </Form.Item>
                    <Form.Item label="所属角色">
                        {
                            getFieldDecorator("userGrade", {
                                rules: [
                                    {
                                        required: true,
                                        message: '请选择所属角色！',
                                    },
                                ],
                                initialValue: userGrade ? this.getGetuserName(userGrade) : "",
                            })(
                                <Select>
                            {
                                this.props.roleList.map(item => {
                                    return <Option value={item._id} key={item._id}>{item.roleName}</Option>
                                })
                            }
                        </Select>
                            )
                        }
                        
                    </Form.Item>



                </Form>
            </div>
        );
    }
}
const AddUser = Form.create()(OldAddUser)
export default AddUser;